/* STEP 1: Define Body style for background 
    This need not be coppied while placing a clock in another tab*/
body {

    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #1a1a1a; /* Very dark background */
    font-family: 'Inter', sans-serif; /* Use Inter font */
    overflow: hidden; /* Prevent scrollbars */

}

/* STEP 2: Define style for the main clock container */
.clock-container {

    /* STEP 2.1: Make the div container square (needed to make it circular) */
    width: 300px;
    height: 300px;

    /* STEP 2.2: Give clock a shape; 50% to make it circular. */
    border-radius: 20%; 

    /* STEP 2.3: Define clock color */
    background-color: #2c2c2c;
    border: 4px solid #c6ffbd;
    position: relative;

    /* STEP 2.4: Add shadow to clock 
    setting: 'width-offset' 'height-offset' 'blur' 'color'  */
    box-shadow: 0 0 30px rgb(54, 54, 54), /* outer shadow */
                inset 0 0 15px rgb(255, 255, 255); /* inner shadow */
    
    /* STEP 2.5: Use flexbox to easily center the hands */
    display: flex; 
    justify-content: center; 
    align-items: center;
            
}

/* STEP 3: Define central pivot point for the hands 

    QUESTIONS

    Q: What does '::after' do?
    A: It's a pseudo element that repeats the content with different style.
*/
.clock-container::after {

    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ffffff; /* central dot */
    z-index: 10; /* Ensure it's above the hands */

}

/* STEP 4: Define base style for all hands */
.hand {

    /* Custom CSS property for dynamic rotation */
    --rotation: 0; 
    position: absolute;

    /* Position hands from the bottom of the clock */
    bottom: 50%;

    /* Center horizontally */
    left: 50%; 

    /* Rotate around the bottom center of the hand */
    transform-origin: bottom center; 

    /* Rounded top, slightly less rounded bottom */
    border-radius: 5px 5px 2px 2px; 

    /* Apply initial translation and dynamic rotation */
    transform: translateX(-50%) rotate(var(--rotation));

    /* Smooth transition for second hand primarily
     Changed from 0.1s to 1s to remove ticking */
    transition: transform 1s linear; 
    
}

/* STEP 5A: Define specific styles for the second hand */
.hand.second {

    /* STEP A: Set thickness of the hand */
    width: 2px;

    /* STEP B: Set the length relative to clock size */
    height: 45%; 

    /* STEP C: Set the color */
    background-color: #75e298;
        
}

/* STEP 5B: Define specific styles for the minute hand */
.hand.minute {

    /* STEP A: Set thickness of the hand */
    width: 5px;

    /* STEP B: Set the length relative to clock size */
    height: 40%;

    /* STEP C: Set the color */
    background-color: #368839;
        
}

/* STEP 5C: Define specific styles for the hour hand */
.hand.hour {

    /* STEP A: Set thickness of the hand */
    width: 7px;

    /* STEP B: Set the length relative to clock size */
    height: 30%;

    /* STEP C: Set the color */
    background-color: #56b459;
        
}

/* STEP 6: Define styles for the clock numbers */
.number {

    /* Custom CSS property for number positioning */
    --number-rotation: 0; 
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 1.2em; /* Size of the numbers */
    font-weight: bold;
    color: #ecf0f1; /* Light grey for numbers */
    /* Rotate the container for each number to position it around the clock */
    transform: rotate(var(--number-rotation));

}

/* Inner div to counter-rotate the number text so it remains upright */
.number div {

    position: absolute;
    top: 10%; /* Distance from the center to the number */
    left: 50%;
    transform: translateX(-50%) rotate(calc(-1 * var(--number-rotation)));
        
}

/* Individual rotation for each number's container */
.number1 { --number-rotation: 30deg; }
.number2 { --number-rotation: 60deg; }
.number3 { --number-rotation: 90deg; }
.number4 { --number-rotation: 120deg; }
.number5 { --number-rotation: 150deg; }
.number6 { --number-rotation: 180deg; }
.number7 { --number-rotation: 210deg; }
.number8 { --number-rotation: 240deg; }
.number9 { --number-rotation: 270deg; }
.number10 { --number-rotation: 300deg; }
.number11 { --number-rotation: 330deg; }
.number12 { --number-rotation: 0deg; } 
/* 12 o'clock is at the top (0 degrees) */

/* Responsive adjustments */
@media (max-width: 600px) {
            
    .clock-container {

        width: 250px;
        height: 250px;
        border: 8px solid #27ae60;
            
    }
    
    .hand.second {
                
        width: 2px;
                
        height: 40%;
            
    }
            
    .hand.minute {
                
        width: 6px;
        height: 35%;
            
    }
            
    .hand.hour {
                
        width: 9px;       
        height: 28%;
            
    }
            
    .number {
                
        font-size: 1em;
            
    }
            
    .clock-container::after {
                
        width: 12px;
        height: 12px;
            
    }
        
}